<template>
  <ul class="album-list">
    <!-- 我的收藏专辑,可用于收藏的歌手 -->
    <li class="list-item flex" v-for="(item, index) in list" :key="index">
      <div class="img mgl-12">
        <slot name="img" :item="item">
          <img class="sub-img mleft-10" :src="item.picUrl + '?param=100y100'" />
        </slot>
      </div>
      <div class="album-name font-14 mgl-12">
        <slot name="item2" :item="item"></slot>
      </div>
      <div class="desc-item font-12">
        <slot name="item3" :item="item"></slot>
      </div>
      <div class="desc-item font-12">
        <slot name="item4" :item="item"></slot>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: {
    list: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="less" scoped>
.album-list {
  padding: 0 40px;
}
.list-item {
  height: 90px;
  align-items: center;
  text-align: left;
  &:nth-child(odd) {
    background-color: #f9f9f9;
  }
  &:nth-child(even) {
    background-color: #ffffff;
  }
  &:hover {
    background-color: #f0f1f2;
  }
}
.sub-img {
  height: 60px;
  width: 60px;
  border-radius: 4px;
}
.album-name {
  min-width: 100px;
  flex: 1;
}
.desc-item {
  width: 150px;
  color: #c3c3c4;
}
</style>
